<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- 放搜索条件 
        :inline="ture"让表单元素占一行,一行不够会换行-->
        <el-form :inline="true">
          <el-form-item label="角色名称">
            <el-input v-model="orderParam.authName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clear">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryEmployee">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="24">
        <!-- 放表格数据 -->
        <el-button type="danger" @click="putawayVisible = true">新增角色</el-button>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="authName" label="角色名称" width="180"></el-table-column>
          <el-table-column prop="perNum" label="角色数量"></el-table-column>
          <el-table-column prop="describ" label="角色描述"></el-table-column>
          <el-table-column prop="authCode" label="权限"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              {{
              scope.row.status == 0 ? "禁用" : "启用"
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="updateAuth(scope.row)">编辑</el-button>
              <el-button @click="delAuth(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <!-- 放分页部分 -->
        <el-pagination
          background
          :page-sizes="[3, 5, 10, 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage"
          @prev-click="prevPage"
          @size-change="sizeChange"
          @current-change="currentPage"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" title="编辑角色" :append-to-body="true">
      <el-form :model="formData" :rules="formRules" ref="form">
        <el-form-item label="角色名称" label-width="100px" prop="authName">
          <el-input v-model="formData.authName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="角色数量" label-width="100px" prop="perNum">
          <el-input v-model="formData.perNum"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" label-width="100px" prop="authCode">
          <el-input v-model="formData.authCode"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="100px" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px" prop="describ">
          <el-input v-model="formData.describ"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" prop="remark">
          <el-input v-model="formData.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateDictSubmit">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增角色" :visible.sync="putawayVisible">
      <el-form :model="addParam" :rules="formRules" ref="addform">
        <el-form-item label="角色名称" label-width="100px" prop="authName">
          <el-input v-model="addParam.authName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="角色数量" label-width="100px" prop="perNum">
          <el-input v-model="addParam.perNum"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" label-width="100px" prop="authCode">
          <el-input v-model="addParam.authCode"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="100px" prop="status">
          <el-radio-group v-model="addParam.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px" prop="describ">
          <el-input v-model="addParam.describ"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" prop="remark">
          <el-input v-model="addParam.remark"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="putawayVisible = false">取 消</el-button>
        <el-button type="primary" @click="addictSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
  <script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      putawayVisible: false,
      orderParam: {
        authName: ""
      },
      formData: {
        id: "",
        authName: "",
        status: "",
        remark: "",
        authCode: "",
        perNum: "",
        describ: ""
      },
      dialogVisible: false,
      addParam: {
        authName: "",
        perNum: "",
        authCode: "",
        status: "1",
        remark: "",
        describ: ""
      },
      formRules: {
        authName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        authCode: [
          { required: true, message: "请输入角色权限", trigger: "blur" },
          { validator: this.validateAuthCode, trigger: "blur" }
        ],
        perNum: [
          { required: true, message: "请输入角色数量", trigger: "blur" }
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        describ: [],
        remark: []
      },
      tableData: []
    };
  },
  methods: {
    // 点击保存按钮时触发
    updateDictSubmit() {
      // 调用表单的验证方法
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过后，执行保存操作
          this.$axios
            .post("api/auth/updateAuth", this.formData)
            .then(res => {
              if (res.data.code === 200) {
                this.dialogVisible = false;
                this.queryEmployee();
              }
            })
            .catch(error => {
              // 处理保存失败情况
              console.error("Error occurred while updating dictionary:", error);
              // 可以添加错误处理逻辑，比如提示用户保存失败
              this.$message.error("保存失败，请稍后重试");
            });
        } else {
          // 如果表单验证未通过，可以给用户提示错误信息
          this.$message.error("表单数据验证失败，请检查输入");
          return false;
        }
      });
    },
    updateAuth(row) {
      // 将弹窗设置为可见状态
      this.dialogVisible = true;
      // 将表单数据设置为当前行的数据
      this.formData = {
        id: row.id,
        authName: row.authName,
        status: row.status.toString(),
        remark: row.remark,
        authCode: row.authCode,
        perNum: row.perNum,
        describ: row.describ
      };
    },
    //自定义验证
    validateAuthCode(rule, value, callback) {
      const authCode = parseInt(value);
      if (!Number.isNaN(authCode) && authCode >= 1 && authCode <= 7) {
        // 验证通过
        callback();
      } else {
        // 验证失败，返回错误信息
        callback(new Error("角色权限范围为1到7"));
      }
    },
    clear() {
      this.orderParam.authName = "";
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryEmployee();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryEmployee();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryEmployee();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryEmployee();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryEmployee();
    },
    queryEmployee() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;
      this.$axios.post("api/auth/queryAuthList", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.tableData = pageData.list;
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    delAuth(val) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.get("api/auth/delAuth/" + val).then(res => {
            if (res.data.code == 200) {
              //发删除请求
              this.$message.success("删除成功!");
              this.queryEmployee();
            }
          });
        })
        .catch(() => {});
    },

    addictSubmit() {
      // 调用 validate 方法进行表单验证
      this.$refs.addform.validate(valid => {
        if (valid) {
          // 表单验证通过，可以执行新增角色的操作
          this.$axios.post("api/auth/addAuth", this.addParam).then(res => {
            if (res.data.code === 200) {
              this.putawayVisible = false;
              this.queryEmployee();
            } else {
              // 处理保存失败情况
              console.error(
                "Error occurred while adding dictionary:",
                res.data.msg
              );
              // 可以添加错误处理逻辑，比如提示用户保存失败
              this.$message.error("保存失败，请稍后重试");
            }
          });
        } else {
          // 表单验证不通过，提示用户填写必要的信息
          this.$message.warning("请填写必要的信息");
        }
      });
    }
  },
  created() {
    this.queryEmployee();
  }
};
</script>
    
<style scoped>
</style>